<div class="virtualTable">
  <div class="btnList">
    <button nz-button nzType="primary" nz-dropdown [nzDropdownMenu]="menu"><span nz-icon nzType="plus"
        nzTheme="outline"></span>新增</button>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item (click)="_create('folder')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-a-wenjianjiazhuse"></use>
          </svg>
          新建文件夹
        </li>
        <li nz-menu-item (click)="_create('excel')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-excel-01"></use>
          </svg>新建在线表格
        </li>
      </ul>
    </nz-dropdown-menu>
    <i class="iconfont icon-excel-01" style="color: black;"></i>
  </div>
  <!-- 文件夹面包屑 -->
  @if(pagelistbread.length){
  <div class="pages-list-filesbread">
    <nz-breadcrumb>
      <nz-breadcrumb-item>
        <span nz-icon nzType="rollback" nzTheme="outline" style="margin-right: 20px;cursor: pointer;color: #2d79fc;"
          (click)="back()"></span>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item *ngFor="let item of pagelistbread;let $index = index; ">{{item.name}}</nz-breadcrumb-item>
    </nz-breadcrumb>
  </div>
  }

  <nz-table class="nz-table" nzTableLayout="fixed" #virtualTable [nzBordered]="true" [nzVirtualItemSize]="30"
    [nzData]="listOfData" [nzVirtualForTrackBy]="trackByIndex" [nzFrontPagination]="false" [nzShowPagination]="false"
    [nzScroll]="{ y: '600px' }" nzSize="small" style="table-layout: auto;">
    <thead>
      <tr>
        <th nzWidth="80px">序号</th>
        <th nzWidth="200px">uuid</th>
        <th>文件名</th>
        <th>文件大小</th>
        <th>文件类型</th>
        <th>创建时间</th>
        <th>更新时间</th>
        <th>创作者</th>
        <th nzRight>操作</th>
      </tr>
    </thead>
    <tbody>
      <ng-template nz-virtual-scroll let-data let-index="index">
        <tr>
          <td>{{ data.index+1 }}</td>
          <td>{{ data.id }}</td>
          <td>
            <span (click)="handleClick(data)" style="cursor: pointer;color:#2d79fc ;">
              @if (data.type==="excel") {
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-excel-01"></use>
              </svg>
              }@else {
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-a-wenjianjiazhuse"></use>
              </svg>
              }
              {{ data.name }}
            </span>
          </td>
          <td>{{ '-' }}</td>
          <td>{{ data.ext||'-' }}</td>
          <td>{{data.createtime}}</td>
          <td>{{'-' }}</td>
          <td>{{ data.ownerName }}</td>
          <td nzRight>
            <span style="display: flex;gap: 10px;">
              @if( data.ext){
              <a (click)="_share(data)">分享</a>
              }
              <a (click)="_remove(data)">删除</a>
            </span>
          </td>
        </tr>
      </ng-template>
    </tbody>
  </nz-table>
  <workSpace-dialog #dialogRef (getList)="getList($event)"></workSpace-dialog>
</div>